<template>
	<view class="transaction">
		<!-- 交易专区 -->
		<view class="trans-list">
			<view class="trans-item" v-for="item in transactionList" :key="item.uuid">
				<view class="info">
					<view class="pic">
						<image :src="item.img_url" mode="heightFix"></image>
					</view>
					<view class="detail">
						<view class="title">
							{{item.title}}
						</view>
						<view class="type">
							{{item.type}}
						</view>
						<view class="address">
							{{item.address}}
						</view>
					</view>

				</view>
				<view class="go-to">
					<view class="chose">
						<view class="chose-item">
							<view class="icon">
								<image src="../../static/icon/mav_jiache.png" mode="widthFix"></image>
							</view>
							<view class="title">
								驾车
							</view>
						</view>
						<view class="chose-item">
							<view class="icon">
								<image src="../../static/icon/nav_qixing.png" mode="widthFix"></image>
							</view>
							<view class="title">
								骑行
							</view>
						</view>
						<view class="chose-item">
							<view class="icon">
								<image src="../../static/icon/nav_buxing.png" mode="widthFix"></image>
							</view>
							<view class="title">
								步行
							</view>
						</view>
					</view>
					<view class="distance">
						{{(item.juli / 1000).toFixed(2)}}km
					</view>
				</view>
			</view>
			<view class="load-more">
				<u-loadmore :status="status" icon-type="flower" :load-text="loadText" @loadmore="addMoreData" />
			</view>

		</view>

	</view>
</template>

<script>
	import request from "@/util/request.js"
	export default {
		data() {
			return {
				page: 1,
				transactionList: [],
				status: 'loadmore',
				loadText: {
					loadmore: '加载更多',
					loading: '正在加载中',
					nomore: '没有更多了'
				}
			}
		},
		methods: {
			// 手动加载更多
			addMoreData() {
				this.status = 'loading'
				this.requestData()
			},
			requestData() {
				request.globalRequest({
					url: "/api/merchant/private/periphery_list",
					data: {
						recycle: 9,
						lat: 0,
						lon: 0,
						page: this.page,
						size: 20
					}
				}).then(res => {
					console.log(res);
					if (res.length > 0) {
						res.forEach(t => {
							this.transactionList.push({
								img_url: 'http://yihao.cdn.gd-zjgj.com/' + t.merchantImageTop,
								title: t.merchantTitle,
								type: t.merchantType,
								address: t.addressProvince + t.addressCity + t.addressArea + t
									.address,
								uuid: t.merchantUuid,
								juli: t.juli
							})
						})

						this.page++
						if (res.length < 20) {
							this.status = "nomore"
						}

					}
					console.log(this.transactionList);
				})
			}

		},
		created() {
			this.requestData()
		}
	}
</script>

<style lang="scss" scoped>
	.transaction {
		padding: 20rpx;

		image {
			width: 100%;
		}

		.trans-list {
			padding: 10rpx;
			background-color: #fff;
			border-radius: 20rpx;


			.trans-item {
				border-bottom: 1px solid #eee;

				padding: 10rpx 0;

				.info {
					display: flex;
					align-items: center;
					margin-bottom: 10rpx;

					.pic {
						image {
							height: 100rpx;
							border-radius: 10rpx;
						}
					}

					.detail {
						margin-left: 20rpx;

						.title {
							font-weight: 700;
							font-size: 28rpx;
						}

						.type {
							padding: 0 30rpx;
							display: inline-block;
							margin: 10rpx 0;
							font-size: 24rpx;
							border-radius: 999rpx;
							color: #E0635E;
							border: 2rpx solid #E0635E;
						}

						.address {
							color: #9E9E9E;
							font-size: 24rpx;
							line-height: 40rpx;
						}
					}

				}

				.go-to {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 20rpx 0;

					.chose {
						display: flex;
						align-items: center;

						.chose-item {
							display: flex;
							align-items: center;
							margin-right: 40rpx;

							.icon {
								width: 28rpx;
								margin-right: 10rpx;
							}

							.title {
								font-size: 24rpx;
								color: #6A6A6A;
							}
						}
					}

					.distance {
						color: #6A6A6A;
						font-size: 24rpx;
					}
				}
			}

			.load-more {
				padding: 20rpx 0;
			}
		}
	}
</style>
